<template>
  <!-- 首页新闻 -->
  <div class="news">
    <myTitle style="margin-top: 50px" name="新闻资讯" EngName="News"></myTitle>
    <!-- 轮播图  新闻资讯和列表-->
    <div class="news-content">
      <!-- 轮播图 -->
      <div class="banner-news">
        <div class="swipe-container" id="swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../img/banner_news1.jpg" alt="" />
              <span>
                [2021-04-30]
                奥来德喜获“2020年度中国新型显示产业链发展贡献奖-卓...</span
              >
            </div>
            <div class="swiper-slide">
              <img src="../img/banne_news2.jpg" alt="" />
              <span>
                [2019-01-16]
                吉林省委副书记、省长景俊海到吉林奥来德光电材料股份有限公...</span
              >
            </div>
            <div class="swiper-slide">
              <img src="../img/banner_news3.jpg" alt="" />
              <span>
                [2021-04-22]
                轩景泉出席吉林省“人才引培专项服务行动”启动仪式并代表企...</span
              >
            </div>
            <div class="swiper-slide">
              <img src="../img/banner_news4.jpg" alt="" />
              <span> [2022-06-27] 奥来德签订“璀璨行动”项目合作协议</span>
            </div>
          </div>
          <div class="swiper-pagination" id="pag"></div>
        </div>
      </div>
      <!-- 新闻资讯 -->
      <div class="info">
        <div class="info-title">
          <span @mousemove="now = 0" :class="now == 0 ? 'active' : ''"
            >企业新闻 / CORPORATE</span
          >
          <span @mousemove="now = 1" :class="now == 1 ? 'active' : ''"
            >行业新闻 / INDSTRY</span
          >

          <router-link to="/news">
            MORE <Icon type="ios-arrow-forward"
          /></router-link>
        </div>
        <!-- 新闻资讯上部分 -->
        <div class="info-news" v-if="now == 0">
          <img src="../img/info_news1.jpg" width="192px" height="122px" />
          <div class="info-txt">
            <span style="font-weight: 600">奥来德荣获2021年度中...</span>
            <span>发布日期 2022-08-01</span>
            <span>由中国电子材料行业协会、中国光学光电子行业协...</span>
            <a href="#">查看详情</a>
          </div>
        </div>
        <div class="info-news" v-if="now == 1">
          <img src="../img/info_news2.jpg" width="192px" height="122px" />
          <div class="info-txt">
            <span style="font-weight: 600"> 奥来德携最新科创成果精彩...</span>
            <span style="">发布日期 2022-06-01</span>
            <span>第二十四届中国北京国际科技产业博览会...</span>
            <a href="#">查看详情</a>
          </div>
        </div>
        <!-- 新闻资讯下的列表 企业新闻 以及行业新闻的列表 -->
        <!-- 企业新闻 -->
        <div class="news-list" v-if="now == 0">
          <div class="data">
            <p
              style="
                background-color: var(--color-zdyblue);
                color: #fff;
                font-size: 26px;
              "
            >
              14
            </p>
            <p style="background-color: #fff">2022-07</p>
          </div>
          <div class="content">
            <p>奥来德与长春工大签署战略合作协议</p>
            <span>光电协进会指出，抬头显示器 (HUD)及电子后照镜...</span>
          </div>
        </div>
        <div class="news-list" v-if="now == 0">
          <div class="data">
            <p
              style="
                background-color: var(--color-zdyblue);
                color: #fff;
                font-size: 26px;
              "
            >
              21
            </p>
            <p style="background-color: #fff">2022-05</p>
          </div>
          <div class="content">
            <p>光电协进会：车用面板市场2022年达...</p>
            <span>07 光电协进会指出，抬头显示器 (HUD)及电子后照镜...</span>
          </div>
        </div>
        <!-- 行业新闻 -->
        <div class="news-list" v-if="now == 1">
          <div class="data">
            <p
              style="
                background-color: var(--color-zdyblue);
                color: #fff;
                font-size: 26px;
              "
            >
              23
            </p>
            <p style="background-color: #fff">2022-01</p>
          </div>
          <div class="content">
            <p>吉林省市场监督管理厅厅长陈胜一行到奥...</p>
            <span>7月11日下午，吉林省市场监督管理厅厅长陈胜一行4...</span>
          </div>
        </div>
        <div class="news-list" v-if="now == 1">
          <div class="data">
            <p
              style="
                background-color: var(--color-zdyblue);
                color: #fff;
                font-size: 26px;
              "
            >
              06
            </p>
            <p style="background-color: #fff">2022-06</p>
          </div>
          <div class="content">
            <p>上海重点发展新型显示关键装备、材料，...</p>
            <span>7月11日下午,吉林省市场监督管理厅厅长陈胜一行4...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import myTitle from "@/components/myTitle.vue";
export default {
  data() {
    return {
      now: 0,
    };
  },
  components: {
    myTitle,
  },
  mounted() {
    var mySwiper = new Swiper("#swiper1", {
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      effect: "fade",
      pagination: {
        el: "#pag",
        clickable: true,
        bulletClass: "my-bullet", //需设置.my-bullet样式
        bulletActiveClass: "my-bullet-active",
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.news {
  width: var(--width);
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
  #swiper1 {
    position: relative;
    width: 700px;
    margin-right: 30px;
    height: 375px;
    overflow: hidden;
    .swiper-slide {
      position: relative;
      span {
        position: absolute;
        padding-left: 10px;
        bottom: 0px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        background-color: rgb(0, 0, 0, 0.7);
       
      }
    }
  }
  #pag {
    position: absolute;
    left: 610px;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    width: 70px;
    z-index: 2;
  }

  .news-content {
    display: flex;
    justify-content: center;
  }
  .title {
    margin: 30px auto;
    text-align: center;
  }
  .info {
    min-width: 550px;
    // background-color: pink;
    .info-title {
      color: #333;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      span {
        font-size: 16px;
        margin-right: 30px;
        &.active {
          color: var(--color-zdyblue);
        }
        &:hover {
          color: var(--color-zdyblue);
        }
      }
      a {
        font-weight: normal;
        margin-left: 30px;
      }
    }
    .info-news {
      margin-top: 30px;
      display: flex;

      .info-txt {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
      }
      img {
        border-radius: 4px;
      }
    }
    .news-list {
      margin-top: 20px;
      border-bottom: 1px solid #d2d0d0;
      display: flex;
      .content {
        margin-left: 25px;
        line-height: 30px;
        p {
          font-size: 16px;
          color: #333;
          user-select: none;
          cursor: pointer;
          &:hover {
            color: var(--color-zdyblue);
          }
        }
      }
      .data {
        width: 100px;
        height: 80px;
        background: red;
        p {
          width: 100%;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
}
</style>
<style type="text/css">
#pag > .my-bullet {
  width: 13px;
  height: 13px;
  background-color: #fff;
}
#pag > .my-bullet-active {
  background: var(--color-zdyblue);
  opacity: 1;
}
</style>